<template>
  <div class="delivery-list">
    <div class="filter-container main-content">
      <el-form
        :inline="true"
        :model="formInline"
        ref="formInline"
        class="demo-form-inline"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="产品名称" prop="name">
              <el-input
                v-model="formInline.name"
                placeholder="请输入产品名称"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="small"
                @click="getStorehouseList"
                >搜索</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="small"
                @click="handleReset"
                >清空</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="main-content delivery-table">
      <div class="inbound-operate">
        <el-button type="primary" size="small" @click="dialogFormVisible = true"
          >入库申请</el-button
        >
      </div>
      <el-table border :data="tableData" style="width: 100%" max-height="400">
        <el-table-column prop="id" label="序号" />
        <el-table-column prop="name" label="产品名称" />
        <el-table-column prop="factory" label="生产厂家" />
        <el-table-column prop="bid" label="生产批号" />
        <el-table-column prop="accept" label="数量" />
        <el-table-column prop="specification" label="单位规格" />
        <el-table-column prop="mark" label="备注" />
        <el-table-column prop="user" label="入库人" />
        <el-table-column prop="time" label="入库日期" />
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.exist === 1"
              @click.native.prevent="handleThrowPre(scope.row)"
              type="text"
              size="small"
            >
              出库
            </el-button>
            <el-button
              @click.native.prevent="handleUpdate(scope.row, scope.$index)"
              type="text"
              size="small"
            >
              修改
            </el-button>
            <el-button
              @click.native.prevent="handleDelete(scope.row.id)"
              type="text"
              size="small"
              class="btn-delete"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageInfo.pageSize"
        :total="pageInfo.total"
        @current-change="handleChangeCurrent"
      />
    </div>
    <!-- 入库申请 -->
    <el-dialog title="入库" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="dialogForm">
        <el-form-item
          :label-width="formLabelWidth"
          label="产品名称"
          prop="name"
        >
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          label="生产厂家"
          prop="factory"
        >
          <el-input v-model="form.factory"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="生产批号" prop="bid">
          <el-input v-model="form.bid"></el-input>
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          label="入库数量"
          prop="accept"
        >
          <el-input v-model="form.accept"></el-input>
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          label="单位规格"
          prop="specification"
        >
          <el-input v-model="form.specification"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="备注" prop="mark">
          <el-input type="textarea" v-model="form.mark"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handleOperate">{{
            currentIndex === -1 ? "新增" : "更新"
          }}</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 出库申请 -->
    <el-dialog title="出库" :visible.sync="dialogFormThrowVisible">
      <el-form :model="form" ref="dialogThrowForm">
        <el-form-item
          :label-width="formLabelWidth"
          label="产品名称"
          prop="name"
        >
          <el-input v-model="form.name" disabled></el-input>
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          label="生产厂家"
          prop="factory"
        >
          <el-input v-model="form.factory" disabled></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="生产批号" prop="bid">
          <el-input v-model="form.bid" disabled></el-input>
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          label="库存数量"
          prop="inventory"
        >
          <el-input v-model="form.inventory" disabled></el-input>
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          label="单位规格"
          prop="specification"
        >
          <el-input v-model="form.specification" disabled></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="出库人" prop="outer">
          <el-input v-model="form.outer"></el-input>
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          label="出库数量"
          prop="throw"
        >
          <el-input v-model="form.throw"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="用途" prop="useto">
          <el-input type="textarea" v-model="form.useto"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="备注" prop="tmark">
          <el-input type="textarea" v-model="form.tmark"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormThrowVisible = false">取消</el-button>
          <el-button type="primary" @click="handleThrow">立即出库</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  getStorehouse,
  delStorehouse,
  addStorehouse,
  updateStorehouse,
} from "../../../api/storehouse";
import moment from "moment";
export default {
  name: "delivery-list",
  data() {
    return {
      formInline: {
        name: "",
      },
      form: {
        name: "",
        factory: "",
        bid: "",
        accept: 0,
        specification: "",
        mark: "",
        throw: 0,
        useto: "",
        outer: "",
        inventory: 0,
        tmark: ""
      },
      tableData: [],
      pageInfo: {
        current: 1,
        pageSize: 10,
      },
      formLabelWidth: "100px",
      dialogFormVisible: false,
      dialogFormThrowVisible: false,
      currentInfo: {},
      currentIndex: -1,
    };
  },
  created() {
    this.getStorehouseList();
  },
  computed: {
    username() {
      return this.$store.state.userInfo.username;
    },
  },
  methods: {
    async getStorehouseList() {
      const { current, pageSize } = this.pageInfo;
      const res = await getStorehouse({
        ...this.formInline,
        current,
        pageSize,
      });
      const { data, pageInfo } = res?.data;
      this.tableData = data?.map((x) => {
        return {
          ...x,
          time: moment(x.time).format("YYYY-MM-DD HH:mm:ss"),
        };
      });
      this.pageInfo = pageInfo;
    },
    async handleThrow() {
      const { outer, useto, throw: throwNum, id } = this.form;
      if (throwNum > this.form.accept) {
        this.$message({
          type: "warning",
          message: "出库数量不能大于库存数量",
        });
        return;
      }
      const res = await updateStorehouse({
        id,
        exist: 0,
        outer,
        useto,
        throw: throwNum,
        wime: moment().format("YYYY-MM-DD HH:mm:ss"),
      });
      const { code, message } = res?.data;
      if (code === 0) {
        this.$message({
          type: "success",
          message,
        });
        this.handleClear();
      }
    },
    async handleOperate() {
      let res = {};
      if (this.currentIndex === -1) {
        res = await addStorehouse({
          ...this.form,
          user: this.username,
          exist: 1,
          time: moment().format("YYYY-MM-DD HH:mm:ss"),
        });
      } else {
        res = await updateStorehouse(this.form);
      }
      const { code, message } = res?.data;
      if (code === 0) {
        this.$message({
          type: "success",
          message,
        });
        this.handleClear();
      } else {
        this.$message({
          type: "error",
          message,
        });
      }
    },
    handleChangeCurrent(index) {
      this.pageInfo.current = index;
      this.getStorehouseList();
    },
    handleReset() {
      this.$refs["formInline"].resetFields();
      this.getStorehouseList();
    },
    handleClear() {
      this.dialogFormVisible = false;
      this.dialogFormThrowVisible = false;
      this.form = {};
      this.getStorehouseList();
      this.currentIndex = -1;
    },
    handleUpdate(row, index) {
      this.dialogFormVisible = true;
      this.form = row;
      this.currentIndex = index;
    },
    handleThrowPre(row) {
      this.dialogFormThrowVisible = true;
      this.form = row;
    },
    async handleDelete(id) {
      if (!id) {
        this.$message({
          type: "warning",
          message: "无效操作",
        });
      }
      const res = await delStorehouse({ id });
      if (res?.data?.code === 0) {
        this.$message({
          type: "success",
          message: "删除成功",
        });
        this.getStorehouseList();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.filter-container {
  padding-bottom: 0;

  /deep/ .el-input {
    width: 200px;
  }

  /deep/ .el-form-item__label {
    margin-left: 20px;

    &:nth-child(1) {
      margin-left: 0;
    }
  }
}

.delivery-table {
  margin-top: 20px;

  /deep/ .el-pagination {
    margin-top: 20px;
    text-align: center;
  }
}

.inbound-operate {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
</style>
